/* base default */
body {
    font-family: Verdana,sans-serif, Arial, Helvetica;
    font-size:1.0em;
    margin: auto;
    padding: 0;
    background: #4c4c4c;
    width: 998px;
}
div, h1, h2, h3, h4, p, ul, ol, li, form, fieldset, table, td, th, span, img {
    margin:0;
    padding:0;
}
textarea {
    resize: none;
}
input,select, textarea, button{
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background-color: #F8F8F8;
    border-color: #AAA #CCC #DDD;
    border-style: solid;
    border-width: 1px;
}
img, a img {
    border: 0;
}
ul {
    list-style:none outside none;
}
a {
    color: #FE9D01;
    text-decoration: none;
}
a:hover {
    text-decoration: none;
    color: #FFCC33;
}
.clear {
    clear:both;
}
.hide {
    display: none;
}

/**********************************************************************/
/* base settings */
/**********************************************************************/
div#header {
    height:56px;
}
div#logo {
    float:left;
}
div#donate_top{
    float:left;
    color: #cccccc;
    font-size: 0.8em;
    padding-top:5px;
    font-style: italic;
}
div#commandpanel {
    float:right;
    font-size:0.8em;
    color: white;
}
div#commandpanel li {
    display:inline;
    padding-left:2px;
    padding-right:2px;
    float: left;
}
.topbutton, button.topbutton, a.topbutton:active, 
a.topbutton:link, a.topbutton:visited {
    color: #FFFFFF;
    font: bold 14px Arial,sans-serif;
    text-align: center;
    border: 1px solid #FEA469;
    border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    background: #FEA469;
    background: -moz-linear-gradient(top, #FEA469 0%, #FF8C05 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FEA469), color-stop(100%, #FF8C05));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FEA469', endColorstr='#FF8C05',GradientType=0 );
    padding: 2px 5px 2px 5px;
}
a.topbutton:hover {
    background: #FDD283;
}
/* base top bar: menu and search */
div #top_bar {
    background: #74a474;
    width: 100%;
    float: left;
    border-radius: 6px;
	-moz-border-radius: 6px;
    font-size: 0.9em;
    height:34px;
}
.menu {
    position:relative;
    width:35%;
    height:34px;
    float: left;
}
.menu ul {
    position:absolute;
    z-index:100;
    padding:8px 5px 0px 5px;
}
.menu li {
    float:left;
}
.menu a, .menu a:active, .menu a:visited, .menu a:hover {
    text-decoration:none;
    color:#FFFFFF;
    padding:10px;
}
#slide {
    position:absolute;
    top:6px;
    height:24px;
    background:#FF8C05;
    z-index:10;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}
#cmdbar {
    float: left;
    height:34px;
    width:36%;
}
#cmdbar ul {
    padding: 3px;
    z-index:100;
}
#cmdbar ul li {
    float: left;
    padding-left: 5px;
}
.cmdbutton {
    color: #FFFFFF;
    font: bold 14px Arial,sans-serif;
    vertical-align: middle;
    text-align: center;
    border: 1px solid #065FB7;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background: #065FB7;
    background: -moz-linear-gradient(top, #d6e9fc 0%, #065FB7 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d6e9fc), color-stop(100%, #065FB7));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d6e9fc', endColorstr='#065FB7',GradientType=0 );
    padding: 4px;
    display: inline-block;
    min-width: 100px;
    cursor: pointer;
}

form#header-search {
    float:right;
    background: none repeat scroll 0 0 #EEEEEE;
    border-radius: 5px;
	-moz-border-radius: 5px;
    height: 27px;
    margin: 4px 20px 0 0px;
    position: relative;
    width: 24%;
}
input#search-txt {
    background: none repeat scroll 0 0 transparent;
    border: none;
    color: #777777;
    font-size: 14px;
    left: 8px;
    line-height: 18px;
    padding: 0;
    position: absolute;
    top: 3px;
    width: 200px;
}
input#search-btn {
    background: url("/static/images/search_btn.gif") no-repeat scroll 0 0 transparent;
    border: none;
    height: 23px;
    overflow: hidden;
    position: absolute;
    right: 2px;
    text-indent: -999em;
    top: 2px;
    width: 23px;
    cursor:pointer;
}
/* all pages */
div.growlUI {
    background: url(/static/images/check48.png) no-repeat 5px 5px;
}
div.growlUI h1, div.growlUI h2 {
	color: white; padding: 5px 5px 5px 75px; text-align: left
}
div.growlUI h1 {
    font-size: 1.6em;
}
.tips{
    overflow: hidden;
    font: message-box;
    background-color: InfoBackground;
    font-size: 0.9em;
    border: 1px solid #C5B270;
    position: relative;
}
.tips_content{
    padding: 10px 20px 10px 10px;
}
.close{
    position: absolute;
    top: 5px;
    right: 5px;
    display: block;
    width: 14px;
    height: 14px;
    background: white;
    text-align: center;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    line-height: 14px;
    cursor: pointer;
}
textarea.vanadium-invalid{
    border: 1px solid red;
}
input.vanadium-invalid{
    border: 1px solid red;
}
#preview img{
    max-width: 320px;
    max-height: 240px;
}
.grade img{
    width: 16px;
    height: 16px;
    vertical-align: text-bottom;
}
/* main page */
.group_title{
    color: #FF8C05;
    margin-bottom: 10px;
}

div#main-page {
    width: 100%;
    float: left;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 5px;
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

/* footer */
div#footer {
    font-size: 0.8em;
    clear:both;
    color:#999999;
    margin:1em;
    padding:2px 0 0;
    text-align:center;
}

/**********************************************************************/
/* page specify settings */
/**********************************************************************/

/* home */
div#index_left {
    float: left;
    width: 660px;
    margin-top: 20px;
    margin-left: 20px;
    margin-bottom: 20px;
}
div#index_right {
    float: right;
    width: 295px;
    margin-top: 20px;
    margin-right: 20px;
    border-radius: 6px;
	-moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}
#slogan p{
    color: #FF8C05;
    width: 270px;
    margin-bottom:6px;
    font-weight: bold;
}
#stats .title{
    font: bold 22px Verdana, SimHei;
    color: #FF8C05;
    margin-top: 20px;
}
#stats  .stats{
    vertical-align: middle;
    font: bold 18px Verdana, SimHei;
    margin-left: 5px;
    margin-bottom: 5px;
    float: left;
    display: block;
    width: 100%;
}
#stats .statstext{
    float:left;
}
.led{
    border: 1px solid #dddddd;
    background-color: #000000;
    padding: 0;
    margin: 0;
    overflow: hidden;
    float: left;
}
.light{
    display: block; float: left;
    width: 2px; height: 2px;
    line-height: 0; font-size: 0px;
    margin: 1px; padding: 0;
    background-color: #422422;
}
.on{
    background-color: red;
}

#donate{
    width: 270px;
    margin-top:6px;
}
#donate p{
    font-size: 0.9em;
}

/* routes map */
div#routes_map_container {
    border: 1px solid #AAAAAA;
    width: 640px;
    height: 480px;
    overflow: hidden;
}
div#routes_map_directions {
    width: 640px;
}
div#routes_map_elevation_chart{
    border: 1px solid #AAAAAA;
    width: 640px;
    display: none;
}
div#routes_search {
    background: none repeat scroll 0 0 #333333;
    width: 642px;
    height:32px;
    border-radius: 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    padding-top: 2px;
    padding-bottom: 2px;
}
#routes_search_tips {
    margin-left: 4%;
    color: #ffffff;
}
#routes_search_msg {
    font-size: 12px;
    color: red;
    width: 31%;
}
input#routes_search_query {
    background: none repeat scroll 0 0 #eeeeee;
    height: 26px;
    font-size: 20px;
    line-height: 24px;
    width: 43%;
    color: #999999;
    padding-left: 10px;
    border-radius: 5px;
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}
input#routes_search_btn {
    background: url("/static/images/search_white.png") no-repeat scroll 0 0 transparent;
    border: none;
    height: 32px;
    width: 32px;
    text-indent: -999em;
    cursor:pointer;
}
img#routes_search_waiting {
    display: none;
}
div#routes_search_results {
    background: #ffffff;
    position: absolute;
    display:none;
    z-index:99;
    border-color: #A2BFF0;
    border-style: solid;
    border-width: 1px;
	text-align: left;
	padding-left: 10px;
	padding-right: 10px;
}
.results_table {
	background:none repeat scroll 0 0 #FFFFFF;
	border:0 none;
	color:#000000;
	cursor:pointer;
	display:block;
	font-size:17px;
	line-height:117%;
	margin:0;
	padding:0;
	position:relative;
	z-index:99;
}
.results_table tr:hover {
	background-color: #D5E2FF;
} 

/* route infobox in gmap */
div.infobox {
    border : 1px solid #222;
    position: absolute;
    background: #ffffff;
    border-radius: 4px;
	-moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}
div.topdiv {
    background: #74a474;
    float: left;
    width: 100%;
    height: 28px;
    border-radius: 4px 4px 0 0;
	-moz-border-radius: 4px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0;
    border-bottom: 1px solid gray;
}
div.topdiv span {
    overflow: hidden;
    width: 234px;
    height: 18px;
    padding-left: 5px;
    padding-top: 5px;
    position: absolute;
}
div.topdiv a{
    width: 234px;
    height: 18px;
    overflow: hidden;
    color: #333333;
    font-weight: bold;
    position: absolute;
}
div.topdiv img {
    width: 28px;
    height: 28px;
    cursor: pointer;
    float: right;

}
div.content {
    width: 100%;
    height: 152px;
    float: left;
}
div.content img{
    width: 200px;
    height: 150px;
    float: left;
    border-radius: 4px;
	-moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    background-image: url("/static/images/map_loading_165.gif");
}
div.content .content_right {
    width: 84px;
    float: right;
    text-align: center;
    font-size: 0.9em;
}
div.content .content_right .distance {
    width: 64px;
    height:42px;
    background: #777777;
    padding-top: 10px;
    margin: 5px 10px 2px 10px;
    font-style:italic;
    color: #eeeeee;
    border-radius: 2px;
	-moz-border-radius: 2px;
    -webkit-border-radius: 2px;
}
.yellowbutton {
    color: #FFFFFF;
    font: bold 12px Arial,sans-serif;
    vertical-align: middle;
    text-align: center;
    border: 1px solid #FEA469;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background: #FF8C05;
    background: -moz-linear-gradient(top, #FFBB6B 0%, #FF8C05 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FFBB6B), color-stop(100%, #FF8C05));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFBB6B', endColorstr='#FF8C05',GradientType=0 );
    padding: 2px 16px 2px 16px;
    margin: 5px;
    cursor: pointer;
}
.yellowbutton img{
    vertical-align: text-bottom;
}
.greenbutton {
    color: #FFFFFF;
    font: bold 12px Arial,sans-serif;
    vertical-align: middle;
    text-align: center;
    border: 1px solid #5E8E5E;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background: #5E8E5E;
    background: -moz-linear-gradient(top, #7DA87D 0%, #5E8E5E 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7DA87D), color-stop(100%, #5E8E5E));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7DA87D', endColorstr='#5E8E5E',GradientType=0 );
    padding: 2px;
    margin: 5px;
    display: block;
    cursor: pointer;
}
.greenbutton img{
    vertical-align: text-bottom;
}
.bluebutton {
    color: #FFFFFF;
    font: bold 12px Arial,sans-serif;
    vertical-align: middle;
    text-align: center;
    border: 1px solid #065FB7;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background: #065FB7;
    background: -moz-linear-gradient(top, #d6e9fc 0%, #065FB7 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d6e9fc), color-stop(100%, #065FB7));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d6e9fc', endColorstr='#065FB7',GradientType=0 );
    padding: 2px;
    margin: 5px;
    display: block;
    cursor: pointer;
}
.bluebutton img{
    vertical-align: text-bottom;
}
.bigsize {
    font: bold 20px Arial,sans-serif;
    padding: 5px;
    display: inline-block;
    min-width: 210px;
}
.size140 {
    font: 16px Arial,sans-serif;
    padding: 2px;
    display: inline-block;
    min-width: 140px;
}
.disabled {
    color: #EEE;
    border: 1px solid #EEEEEE;
    background: #CCCCCC;
    background: -moz-linear-gradient(top, #AAAAAA 0%, #CCCCCC 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #AAAAAA), color-stop(100%, #CCCCCC));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#AAAAAA', endColorstr='#CCCCCC',GradientType=0 );
}
.inline-bsearch_resultsutton {
    display: inline-block;
    padding: 2px 15px;
}

/* search */
#search_results{
    padding: 10px;
}

/* donate page */
div#donate_left{
    float: left;
    width: 334px;
}
div#donate_left img{
    border-radius: 5px 0 0 5px;
	-moz-border-radius: 5px 0 0 5px;
    -webkit-border-radius: 5px 0 0 5px;
    float: left;
}
div#donate_right{
    float: right;
	width: 640px;
    padding: 10px;
}
div#donate_right input{
    vertical-align: middle;
}
div#paypal{
    margin: 10px;
    float: left;
}
div#alipay{
    margin: 10px;
    float: left;
}
div#alipay a{
    border: 1px solid #FEA469;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    display: block;
}
div#alipay img{
    vertical-align: middle;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}

/* tos */
#tos{
    margin: 0 40px;
    font-size: 0.9em;
}
#tos h1{
    margin: 10px;
}
#tos ol, #tos ul{
    padding-left: 40px;
    margin: 5px;
}
#tos p{
    float: right;
    margin: 10px;
}

/*error page*/
#errorpage {
    text-align: center;
    padding: 20px;
}
#error {
    color: red;
    margin: 20px;
    font-weight: bold;
    font-size: 2em;
}
